<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
    <script type="text/javascript" src="../common.js"></script>
	<style type="text/css">
		#dv{
			margin:0 auto;
			text-align:center;
			border: 1px solid green;
			width: 500px;
			height: 400px;
			background-image: url("Sys Sun images/bgi.jpg");
		}
	</style>
</head>
<body>
     <input type="button" name="" value="后退" id="btn3">
<div id="dv">
	<canvas id="solar" width="300" height="300"></canvas>
</div>
</body>
<script type="text/javascript">
	
let sun;
let earth;
let moon;
let ctx;
function init(){
    sun = new Image();
    earth = new Image();
    moon = new Image();
    sun.src = "Sys Sun images/sun.jpg";
    earth.src = "Sys Sun images/earth.jpg";
    moon.src = "Sys Sun images/moon.jpg";
 
    let canvas = document.querySelector("#solar");
    ctx = canvas.getContext("2d");
 
    sun.onload = function (){
        draw()
    }
 
}
init();
function draw(){
    ctx.clearRect(0, 0, 300, 300); //清空所有的内容
    /*绘制 太阳*/
    ctx.drawImage(sun, 130, 130, 40, 40);
 
    ctx.save();
    ctx.translate(150, 150);
 
    //绘制earth轨道
    ctx.beginPath();
    ctx.strokeStyle = "rgba(255,255,0,0.5)";
    ctx.arc(0, 0, 100, 0, 2 * Math.PI)
    ctx.stroke()
 
    let time = new Date();
    //绘制地球
    ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
    ctx.translate(100, 0);
    ctx.drawImage(earth, -12, -12, 30, 30)
 
    //绘制月球轨道
    ctx.beginPath();
    ctx.strokeStyle = "rgba(255,255,255,.3)";
    ctx.arc(0, 0, 40, 0, 2 * Math.PI);
    ctx.stroke();

	//绘制月球
    ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
    ctx.translate(40, 0);
    ctx.drawImage(moon, -3.5, -3.5, 20, 20);
    ctx.restore();
    requestAnimationFrame(draw)
}

    my$("btn3").onclick = function(){
        window.history.back(); //后退
    }
</script>
</html>